?【Vue.js → Nuxt 入門推薦！??新書即將上市 ?】
?《想要 SSR 嗎？就使用 Nuxt 吧！Nuxt 讓 Vue.js 更好處理 SEO 搜尋引擎最佳化》
? Nuxt v4 內容與範例也可以參考並購買本系列文筆著所著書籍
? 預計於 2025/08/14 出版，目前天瓏書局預購有 7??8?? 折優惠
? 點此前往購買：https://pse.is/7yulwm
注意：Nuxt 4 已於 2025/07/16 釋出，本文部分內容或範例可能和最新版本有所不同
?建議你可以使用影片子母畫面功能或全螢幕播放來獲得最佳的觀賞體驗，?下方是本篇教學的相關筆記。
.nuxt?目錄開發環境下由 Nuxt 產生出 Vue 的網站，.nuxt?目錄是 自動產生 的，你不應該任意的調整裡面檔案，因為開發伺服器啟動時會重新建立整個目錄。
.output?目錄當你的網站準備部署至正式環境時，每次編譯建構專案時，皆會 自動重新產生 這個目錄，你不應該任意的調整裡面檔案。
assets?目錄顧名思義，這是靜態資源檔案所放置的位置，目錄內通常包含以下類型的檔案：
這些靜態資源，最終在專案編譯建構時，由 Vite 或 webpack 進行編譯打包。
components?目錄放置 Vue 元件的地方，Nuxt 會自動載入這個目錄中的任何元件。
composables?目錄組合式函數放置的目錄，簡單來說可以把常用或通用的功能寫成一個共用的函數或 JS 檔案，放置在這個目錄視為組合式函數，Nuxt 也會自動載入這些組合式函數，讓需要使用的頁面或元件可以直接做使用。
content?目錄透過使用?Nuxt Content，我們可以在這個目錄下建立?.md、.yml、.csv?和?.json?檔案，Nuxt Content 會讀取並解析這些文件並進行渲染，用來建立基於文件的 CMS。
layouts?目錄用於放置通用或可能重複使用到的佈局模板，提供程式碼的可重複使用性。
middleware?目錄Nuxt 3 提供了路由中間件的概念，用以在導航到下一個頁面之前執行一些程式碼如權限驗證。
node_modules?目錄通常有使用 Node.js 的套件管理，例如 NPM，對此目錄應該有一些印象，使用 Nuxt 3 及專案所需要的相依套件都會存放在這個目錄。
pages?目錄這個目錄主要是用來配置我們的頁面，你也可以只使用?app.vue?來完成你的網站，但如果建立了?pages?這個目錄，Nuxt 3 會自動整合?vue-router，並會依據目錄及檔案結構規則來自動產生出對應路由，也是 Nuxt3 產生路由的方式。
plugins?目錄Nuxt 會自動載入這個目錄檔案，作為插件使用，在檔案名稱可以使用後綴?.server?或?.client，例如，?plugin.server.ts?或?plugin.client.ts?來決定只讓伺服器端或客戶端載入這個插件。
public?目錄這個目錄主要用於伺服器根目錄提供的文件，包含必須固定的檔案名稱如?robots.txt?或不太會變動的?favicon.ico。
server?目錄主要用來建立 Nuxt 後端的服務邏輯，例如 後端 API
用於建立任何後端的邏輯如後端 API，這個目錄下還包含了?api、routes?和?middleware?來區分功能，不具有自動載入，但支援 HMR。
utils?目錄Nuxt 3 會將這個目錄下的函式自動導入並提供給整個應用程式做使用，你可以在這裡實作輔助函式來提供給應用程式做全域的共用，utils 的自動載入與掃描的方式與 composables，會這樣設計主要也是為了與 composables 做區分，utils 通常放置一些無狀態的純函式，而 composables 通常會放置的共用函式，通常有使用到 Vue 的組合式 API 或回傳響應式的狀態。
.gitignore?檔案在使用 Git 版本控制時，可以設置一些不需要或忽略關注變動的檔案及目錄。
.nuxtignore?檔案可以設置讓 Nuxt 編譯建構時，一些不需要或忽略檔案。
app.config.ts?檔案提供服務運行時暴露給客戶端使用的設定，因此，請不要在?app.config.ts?檔案中添加任何機密資訊。
app.vue?檔案Nuxt 3 網站的入口點元件。
nuxt.config.ts?檔案用於配置 Nuxt 專案的設定檔。
package.json?檔案這個檔案裡面定義了專案資訊、腳本、相依套件及版本號，通常有使用 Node.js 套件管理工具建置的專案都會包含此檔案。
tsconfig.json?檔案Nuxt 3 會在?.nuxt?目錄下自動產生一個?tsconfig.json?檔案，其中已經包含了一些解析別名等預設配置；你可以透過專案目錄下的?tsconfig.json?來配置擴展或覆蓋 Nuxt 3 預設的 TypeScript 設定檔。
modules?目錄Nuxt 3 在啟動時會掃描這個模組目錄並載入他們，這個目錄是用來放置自訂模組的地方。
Nuxt 3 的自動載入具體有以下三種：
在專案目錄下建立一個檔案 ./components/IronManWelcome.vue：
<template>
<div class="bg-white py-24">
<div class="flex flex-col items-center">
<h1 class="text-6xl font-semibold text-sky-400">2023 iThome</h1>
<p class="mt-4 text-9xl font-bold text-gray-600">鐵人賽</p>
</div>
</div>
</template>
在?app.vue?檔案中，新增??元件。
<template>
<div>
<IronManWelcome />
</div>
</template>
在專案目錄下建立一個檔案 ./components/custom/HelloWorld.vue：
<template>
<div class="bg-white py-24">
<div class="flex flex-col items-center">
<h1 class="text-6xl font-semibold text-sky-400">Hello World!</h1>
</div>
</div>
</template>
如果想關閉 Nuxt 的自動載入元件或函數的功能，可以修改專案目錄下的?nuxt.config.ts?檔案，將?imports.autoImport?設定為?false。
export default defineNuxtConfig({
imports: {
autoImport: false
}
})
當我們需要手動載入，就可以用?#import?這個 Nuxt 釋出的別名，來個別載入那些具有自動載入的元件或函數。
<script setup>
import { ref, computed } from '#imports'
const count = ref(1)
const double = computed(() => count.value * 2)
</script>
感謝大家的閱讀，歡迎大家給予建議與討論，也請各位大大鞭小力一些：）
如果對這個 Nuxt 3 系列感興趣，可以訂閱接收通知，也歡迎分享給喜歡或正在學習 Nuxt 3 的夥伴。
範例程式碼
參考資料
iThome鐵人賽
看影片追技術
看更多